<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用vue技术收集表单数据  区别开原始的jsp或原生html
         开发中：早期：jsp+servlet  jsp+框架
                 现在：vue+servlet   vue+框架
        总结：现在使用的模式js发送请求到服务器  => ajax技术
        -->
        <form @submit.prevent="submitForm">
            账号：<input type="text" v-model.trim="student.account"><br>
            密码：<input type="password" v-model.trim="student.password"> <br>
            年龄：<input type="number" v-model.number="student.age"><br>
            性别：
                <input type="radio" value="man" name="sex" v-model="student.sex">男
                <input type="radio" value="woman" name="sex" v-model="student.sex">女<br>
            爱好：
                <input type="checkbox" value="music" v-model="student.hobby"> 音乐
                <input type="checkbox" value="game" v-model="student.hobby"> 游戏
                <input type="checkbox" value="sport" v-model="student.hobby"> 运动 <br>  
            校区：
                <select v-model="student.city">
                    <option value="">请选择...</option>
                    <option value="beijing">北京</option>
                    <option value="chengdu">成都</option>
                    <option value="chongqing">重庆</option>
                </select>
                <br>
            其他备注信息：<br>
            <textarea cols="30" rows="10" v-model.lazy="student.other">

            </textarea>
            <br>

            <input type="checkbox" v-model="student.agree"> 我已经同意xxxxx条款.................... <br>
            <button>提交</button>
            <input type="reset">
        </form>

    </div>
    
</body>

</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                
                //定义一个数据模型 和表单项关联上
                student:{
                    //必须指定复选框为数组
                    hobby:[]
                }

                
            }
        },
        methods:{
            submitForm(){
                alert(1)
                JSON.stringify(this.student);
                console.log(this.student);
                //此处已经收集到了表单的数据  你就可以使用ajax技术将该数据发送到后端操作
            }
        }
    });
</script>